<template>
  <div ref="myRef" data-bs-toggle="tooltip" data-bs-placement="top"
       title="">
  </div>
</template>

<script>
import {ref, getCurrentInstance, onMounted} from 'vue'
import $ from "jquery";
import url from "@/router/api";
import {shuffle} from "@/util";

export default {
  name: "IDStatisticView",
  setup() {
    const {proxy} = getCurrentInstance()
    const myRef = ref(null)

    let data = [null];
    let ID = [null];
    let amount = [null];

    onMounted(() => {
      renderChart();
    })

    let myChart = null

    const renderChart = () => {
      if (myChart === null) {
        myChart = proxy.$echarts.init(myRef.value)
      }

      myChart.setOption({
        legend: {},
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value} /个'
          }
        },
        series: [
          {
            name: 'IDAmount',
            type: 'line',
            smooth: true,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            },
          },

        ]
      });

      setInterval(() => {
        myChart.setOption({
              xAxis: [
                {
                  data: ID,
                }
              ],
              series: [
                {
                  data: amount,
                },
              ]
            }
        )

        getAmountsId();

      }, 5000);
    };

    const getAmountsId = () => {
      $.ajax({
        url: url.amountId,
        type: "GET",
        success(resp) {
          if (resp.errorCode === "00000") {
            data = resp.data;
            let shuffleArr = []
            for (let i in data) {
              shuffleArr.push({
                id: i,
                amount: data[i]
              })
            }
            shuffle(shuffleArr)

            for (let shuffleArrElement of shuffleArr) {
              ID.push(shuffleArrElement.id);
              amount.push(shuffleArrElement.amount);
            }
            while (ID.length > 30) {
              ID.shift()
              amount.shift()
            }
          }
        },
        error(resp) {
          console.log(resp)
        }
      })
    };

    return {
      myRef,
    }
  }
}
</script>

<style scoped>

</style>